<template>
    <div>
      <Tabs :value="current" @on-click="tabChange">
        <TabPane label="成绩管理" name="0">
          <Card>
            <Form ref="testForm" :model="testModel" inline :label-width="100">
              <FormItem prop="username" label="会员姓名">
                <Input v-model="testModel.username" placeholder="请输入" clearable style="width:200px"></Input>
              </FormItem>
              <FormItem prop="certificateNo" label="会员卡号">
                <Input v-model="testModel.certificateNo" placeholder="请输入" clearable style="width:200px"></Input>
              </FormItem>
              <FormItem prop="unifiedName" label="考试名称">
                <Input v-model="testModel.unifiedName" placeholder="请输入" clearable style="width:200px"></Input>
              </FormItem>
              <FormItem style="text-align: right">
                <Button @click="queryTest" type="primary" class="m-l-sm" icon="md-search">查询</Button>
                <Button @click="resetTest" class="m-l-sm" icon="md-sync">重置</Button>
              </FormItem>
            </Form>
          </Card>
          <Card class="m-t-md">
            <Row>
              <Table :loading="loading" :columns="testManagement" stripe border :data="testData"></Table>
              <page-temp class="m-t-md" :total="count" :current="pageNo" :size="pageSize" @changePage="changeTestPage"></page-temp>
            </Row>
          </Card>
        </TabPane>
        <TabPane label="考试管理" name="1">
          <Card>
            <Form ref="examForm" :model="testModel" inline :label-width="100">
              <FormItem prop="unifiedName" label="考试名称">
                <Input v-model="testModel.unifiedName" placeholder="请输入" clearable style="width:200px"></Input>
              </FormItem>
              <FormItem prop="type" label="考试类型">
                <Select v-model="testModel.type" placeholder="请选择" clearable style="width:200px">
                  <Option v-for="(_item,index) in typeArr" :key="index" :value="_item.id">{{_item.title}}</Option>
                </Select>
              </FormItem>
              <FormItem style="text-align: right">
                <Button @click="queryExam" type="primary" class="m-l-sm">查询</Button>
                <Button @click="resetExam" class="m-l-sm" >重置</Button>
                <Button @click="addExam" class="m-l-sm">新增考试</Button>
              </FormItem>
            </Form>
          </Card>
          <Card class="m-t-md">
            <Row>
              <Table :loading="loading" :columns="examColumns" stripe border :data="examData"></Table>
              <page-temp class="m-t-md" :total="count" :current="pageNo" :size="pageSize" @changePage="changeExamPage"></page-temp>
            </Row>
          </Card>
          <add-exam :visible.sync="isExam" :title="examTitle" @update="queryExam"></add-exam>
        </TabPane>
<!--        <TabPane label="试题管理" name="2">-->
<!--&lt;!&ndash;          <Card>&ndash;&gt;-->
<!--&lt;!&ndash;            <Form ref="subjectForm" :model="testModel" inline :label-width="100">&ndash;&gt;-->
<!--&lt;!&ndash;              <FormItem prop="matchName" label="题干名称">&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;                <Input v-model="testModel.matchName" placeholder="请输入" clearable style="width:200px"></Input>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;              </FormItem>&ndash;&gt;-->
<!--&lt;!&ndash;              <FormItem prop="matchName" label="考试类型">&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;                <Input v-model="testModel.matchName" placeholder="请输入" clearable style="width:200px"></Input>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;              </FormItem>&ndash;&gt;-->
<!--&lt;!&ndash;              <FormItem style="text-align: right">&ndash;&gt;-->
<!--&lt;!&ndash;                <Button @click="querySubject" type="primary" class="m-l-sm" icon="md-search">查询</Button>&ndash;&gt;-->
<!--&lt;!&ndash;                <Button @click="resetSubject" class="m-l-sm" icon="md-sync">重置</Button>&ndash;&gt;-->
<!--&lt;!&ndash;                <Button @click="addSubject" class="m-l-sm">新增试题</Button>&ndash;&gt;-->
<!--&lt;!&ndash;              </FormItem>&ndash;&gt;-->
<!--&lt;!&ndash;            </Form>&ndash;&gt;-->
<!--&lt;!&ndash;          </Card>&ndash;&gt;-->
<!--          <Card class="m-t-md">-->
<!--            <Row>-->
<!--              <Table :loading="loading" :columns="subjectColumns" stripe border :data="subjectData"></Table>-->
<!--              <page-temp class="m-t-md" :total="count" :current="pageNo" :size="pageSize" @changePage="changeSubPage"></page-temp>-->
<!--            </Row>-->
<!--          </Card>-->
<!--          <add-test :visible.sync="isTest" :title="testTitle" @update="querySubject"></add-test>-->
<!--        </TabPane>-->
      </Tabs>
    </div>
</template>

<script>
  import {examList,deleteExam,examItemList,publishUnifiedExam,getUnifiedExamResultList,getUnifiedExamItemDetail} from '@/api/online-exam';
  import {examType,_examType} from '@/libs/util.js';
  import addExam from '@/components/addExam/addExam';
  import AddTest from "../../../components/addTest/addTest";
    export default {
        data() {
            return {
              current:'0',
              pageNo:1,
              pageSize:10,
              testModel:{
                unifiedId:'',
                unifiedName:'',
                username:'',
                certificateNo:'',
                type:'',
              },
              unifiedId:null,
              loading: false,
              testManagement:[
                {
                  title: "序号",
                  width: 80,
                  align: "left",
                  render: (h, params) => {
                    return h(
                      "span",
                      this.pageSize * (this.pageNo - 1) + params.index + 1
                    );
                  }
                },
                {
                  title: '考试名称',
                  key: 'unifiedName'
                },
                {
                  title: '会员姓名',
                  key: 'username'
                },
                {
                  title: '会员卡号',
                  key: 'certificateNo'
                },
                {
                  title: '考试成绩',
                  key: 'userScore'
                },
                {
                  title: '考试日期',
                  key: 'submitExamTime',
                  render:(h,params) => {
                    return h(
                      'span',
                      this.$moment(params.row.submitExamTime).format('YYYY-MM-DD')
                    )
                  }
                },
                {
                  title: '是否及格',
                  key: 'passFlag',
                  render:(h,params) => {
                    return h(
                      'span',
                      params.row.passFlag === '1'?'及格':'不及格'
                    )
                  }
                }
              ],
              examColumns:[
                {
                  title: "序号",
                  width: 80,
                  align: "left",
                  render: (h, params) => {
                    return h(
                      "span",
                      this.pageSize * (this.pageNo - 1) + params.index + 1
                    );
                  }
                },
                {
                  title: '考试名称',
                  key: 'unifiedName'
                },
                {
                  title: '考试类型',
                  key: 'type',
                  render:(h,params) => {
                    return h(
                      'span',
                      _examType(params.row.type)
                    )
                  }

                },
                {
                  title: '考试时长',
                  key: 'examLength',
                  render:(h,params) => {
                    return h(
                      'span',
                     params.row.examLength+'分钟'
                    )
                  }
                },
                {
                  title: '考题数量',
                  key: 'itemNum'
                },
                {
                  title: '发布状态',
                  key: 'publishFlag',
                  render:(h,params) => {
                    return h(
                      'span',
                      params.row.publishFlag === '0'?'未发布':'已发布'
                    )
                  }
                },

                {
                  title: '考试日期',
                  key: 'startTime',
                  render:(h,params) => {
                    return h('span',
                      this.$moment(params.row.startTime).format('YYYY-MM-DD')+'至'+this.$moment(params.row.endTime).format('YYYY-MM-DD')
                    )
                  }
                },
                {
                  title: '操作',
                  width: 300,
                  render: (h, params) => {
                    let self = this;
                    return h('div', [
                      h(
                        'Button',
                        {
                          props: {type: 'primary', size: 'small'},
                          style: {marginRight: "5px"},
                          on: {
                            click() {
                              self.$router.push({path:`/applets-management/ball-skill/exam-detail/examInfo/${params.row.unifiedId}/0`})
                            }
                          }
                        },
                        '查看详情'
                      ),
                      params.row.publishFlag === '0'? h(
                          'Button',
                          {
                            props: {type: 'default', size: 'small'},
                            style: {marginRight: "5px"},
                            on: {
                              click() {
                                self.$router.push({path:`/applets-management/ball-skill/exam-detail/examList/${params.row.unifiedId}/1`})
                              }
                            }
                          },
                          '设置题目'
                        ):'',
                      h(
                        'Poptip',
                        {
                          props: {
                            confirm: true,
                            title: '您确定要发布这条数据吗?',
                            transfer: true
                          },
                          on: {
                            'on-ok': () => {
                              //发布数据
                              self.publish(params.row)
                            }
                          }
                        },
                        [
                          h(
                            params.row.publishFlag === '0'?'Button':null,
                            {
                              props: {type: 'success', size: 'small'},
                              style: {marginRight: "5px"},
                            },
                            '发布'
                          )
                        ]
                      ),
                      h(
                        'Poptip',
                        {
                          props: {
                            confirm: true,
                            title: '您确定要删除这条数据吗?',
                            transfer: true
                          },
                          on: {
                            'on-ok': () => {
                              //删除数据
                              self.delExam(params.row)
                            }
                          }
                        },
                        [
                          h(
                            'Button',
                            {
                              props: {type: 'error', size: 'small'},
                              style: {marginRight: "5px"},
                            },
                            '删除'
                          )
                        ]
                      )
                    ]);
                  }
                },
              ],
              subjectColumns:[
                {
                  title: "序号",
                  width: 80,
                  align: "left",
                  render: (h, params) => {
                    return h(
                      "span",
                      this.pageSize * (this.pageNo - 1) + params.index + 1
                    );
                  }
                },
                {
                  title: '题干',
                  key: 'examinationTitle'
                },
                {
                  title: '试题类型',
                  key: 'examType'
                },
                {
                  title: '正确答案',
                  key: 'optionsNames'
                },
                {
                  title: '选项A',
                  render: (h, params) => {
                    return h(
                      "span",
                      params.row.options[0]?params.row.options[0].optionContent:'无'
                    );
                  }
                },
                {
                  title: '选项B',
                  render: (h, params) => {
                    return h(
                      "span",
                      params.row.options[1]?params.row.options[1].optionContent:'无'
                    );
                  }
                },
                {
                  title: '选项C',
                  render: (h, params) => {
                    return h(
                      "span",
                      params.row.options[2]?params.row.options[2].optionContent:'无'
                    );
                  }
                },
                {
                  title: '选项D',
                  render: (h, params) => {
                    return h(
                      "span",
                      params.row.options[3]?params.row.options[3].optionContent:'无'
                    );
                  }
                }
              ],
              subjectData:[],
              testData:[],
              examData:[],
              typeArr:examType,
              count:0,
              isExam: false,
              isTest: false,
              examTitle:'新增考试',
              testTitle:'',
              unifiedName:'',
              type: this.$route.params.type?this.$route.params.type:'0'
            }
        },
        watch: {},
        components:{AddTest, addExam},
        computed: {},
        mounted() {
          this.current = this.type;
          if(this.type === '0') {
            this.resetTest()
          }else if(this.type === '1') {
            this.resetExam()
          }else {
            this.resetSubject()
          }
        },
        methods: {
          tabChange(name) {
            this.pageNo = 1;
            this.pageSize = 10;
            this.count = 0;
            if(name === '0') {
              this.resetTest()
            }else if(name === '1') {
              this.resetExam()
            }else {
              this.resetSubject()
            }
          },
          querySubject() {
            let param = {
              unifiedId:this.testModel.unifiedId,
              pageNo: this.pageNo,
              pageSize: this.pageSize,
            };
            getUnifiedExamItemDetail(param)
              .then(res => {
                this.subjectData = res.list;
                this.count = res.count
              })
          },
          resetSubject() {
            // this.$refs["subjectForm"].resetFields();
            // this.querySubject()
          },
          addSubject() {
            this.testTitle = '新增试题';
            this.isTest = true;
          },
          changeSubPage(pageNo) {
            this.pageNo = pageNo;
            this.querySubject();
          },

          queryTest() {
            let param = {
              pageNo: this.pageNo,
              pageSize: this.pageSize,
              unifiedName: this.testModel.unifiedName,
              username: this.testModel.username,
              certificateNo: this.testModel.certificateNo
            };
            getUnifiedExamResultList(param)
              .then(res => {
                this.testData = res.list;
                this.count = res.count
              })
          },
          changeTestPage(pageNo) {
            this.pageNo = pageNo;
            this.queryTest();
          },
          resetTest() {
            this.$refs["testForm"].resetFields();
            this.queryTest()
          },

          delExam(row) {
            deleteExam({unifiedIds:[row.unifiedId]})
              .then(res => {
                this.queryExam()
              })
          },
          queryExam() {
            this.loading = true;
            let param = {
              unifiedName:this.testModel.unifiedName,
              type:this.testModel.type
            };
            examList(param)
              .then(res => {
                this.loading = false;
                this.count = res.count;
                this.examData = res.list;
              })
          },
          changeExamPage(pageNo) {
            this.pageNo = pageNo;
            this.queryExam();
          },
          resetExam() {
            this.$refs["examForm"].resetFields();
            this.queryExam()
          },
          addExam() {
            this.examTitle = '新增考试';
            this.isExam = true;
          },
          publish(row) {
            publishUnifiedExam({unifiedId:row.unifiedId})
              .then(res => {
                this.queryExam()
              })
          }
        }
    };
</script>
<style scoped>
  .ivu-form-item{
    margin-bottom: 0 !important;
  }
</style>
